import utils from './utils'
import Celem from './Celem'
import TextNode from './TextNode'

export default class Div extends Celem {
	constructor(style){
		super()
		const defStyle = {
			width: 'auto',
			height: 'auto',
			top: 0,
            left: 0,
            radius: [0, 0, 0, 0],
            shadow: [0, 0, 0, 0],
            textShadow: [0, 0, 0, 0],
            scale: [1, 1],
            rotate: 0,
            opacity: 1,
            background: '',
            color: '#333',
            border: ['#333', 0],
            textBorder: ['#333', 0],
            overflow: 'auto',
            textAlign: 'left',
            fontStyle: 'normal',
            fontVariant: 'normal',
            fontWeight: 'normal',
            fontSize: 12,
            lineHeight: 20,
            fontFamily: 'arial,sans-serif',
            padding: [0,0,0,0]
		}
		utils.define(this, {
			tagName: 'div',
			textNode: new TextNode()
		}, {readonly: true})
		utils.define(this, {
			text: ''
		}, {watch: true})
		utils.define(this, utils.merge({}, defStyle, style), {
			key: 'computed'
		})
		utils.define(this, Object.assign(defStyle, style), {
			watch: true,
			key: 'style'
		})
		this.on('parentChange', e => {
			if(e.value.computed){
				if(this.style.width === 'auto'){
					this.computed.width = e.value.computed.width
				}
				if(this.style.height === 'auto'){
					this.computed.height = e.value.computed.height
				}
			}else if(e.value.tagName === 'world'){
				if(this.style.width === 'auto'){
					this.computed.width = e.value.width
				}
				if(this.style.height === 'auto'){
					this.computed.height = 20
				}
			}
			this.compute()
		})
		this.on('textChange', () => {
			this.textNode.dirty = true
		})
		this.on('widthChange', () => {
			console.log('----')
		})
	}
	compute(){
		let _this = this,
            hw = Math.round(_this.computed.width / 2),
			hh = Math.round(_this.computed.height / 2),
            hb = _this.computed.border[0] / 2
        
        for(let i=0; i<4; i++){
            let r = _this.computed.radius[i] || 0
            if(r > hw) r = hw
            if(r > hh) r = hh
            _this.computed.radius[i] = r - hb
        }

        _this.points[0] = [hb - hw, _this.computed.radius[0] - hh]
        _this.points[1] = [_this.computed.radius[0] - hw, hb - hh]
        _this.points[2] = [hw - _this.computed.radius[1], hb - hh]
        _this.points[3] = [hw - hb, _this.computed.radius[1] - hh]
        _this.points[4] = [hw - hb, hh - _this.computed.radius[2]]
        _this.points[5] = [hw - _this.computed.radius[2], hh - hb]
        _this.points[6] = [_this.computed.radius[3] - hw, hh - hb]
        _this.points[7] = [hb - hw, hh - _this.computed.radius[3]]

        _this.center[0] = _this.computed.left + hw //- this.parent.options.width / 2
        _this.center[1] = _this.computed.top + hh //- this.parent.options.height / 2
	}
	render(ctx) {
        if (!ctx) return
        let options = this.computed,
            points = this.points
        if(this.text){
            this.textNode.compute(ctx, this.text, options)
			if(this.style.height === 'auto') this.computed.height = this.textNode.height
			this.compute()
        }
        ctx.save()
        ctx.translate(this.center[0], this.center[1])
        //opacity
        ctx.globalAlpha = options.opacity
        //rotate
        ctx.rotate(options.rotate)
        //scale
        ctx.scale(options.scale[0], options.scale[1])

        //阴影
        if (options.shadow.length === 4) {
            ctx.shadowColor = options.shadow[0]
            ctx.shadowOffsetX = options.shadow[1]
            ctx.shadowOffsetY = options.shadow[2]
            ctx.shadowBlur = options.shadow[3]
		}
        ctx.beginPath()
        ctx.moveTo(points[0][0], points[0][1])
        ctx.arc(points[1][0], points[0][1], options.radius[0], Math.PI, 1.5*Math.PI)
        ctx.lineTo(points[2][0], points[2][1])
        ctx.arc(points[2][0], points[3][1], options.radius[1], 1.5*Math.PI, 2*Math.PI)
        ctx.lineTo(points[4][0], points[4][1])
        ctx.arc(points[5][0], points[4][1], options.radius[2], 0, .5*Math.PI)
        ctx.lineTo(points[6][0], points[6][1])
        ctx.arc(points[6][0], points[7][1], options.radius[3], .5*Math.PI, Math.PI)
        ctx.closePath()
        //填充色
        if (options.background) {
            ctx.fillStyle = options.border[1]
            ctx.fill()
        }

        //边框
        // if (options.border[1] && options.border[0] > 0) {
        //     ctx.fillStyle = options.border[1]
        //     ctx.fill()
        //     ctx.beginPath()
        //     ctx.fillStyle = options.background || '#fff'
        //     ctx.moveTo(points[0][0]+options.border[0], points[0][1])
        //     ctx.arc(points[1][0], points[0][1], options.radius[0]-options.border[0], Math.PI, 1.5*Math.PI)
        //     ctx.lineTo(points[2][0], points[2][1]+options.border[0])
        //     ctx.arc(points[2][0], points[3][1], options.radius[1]-options.border[0], 1.5*Math.PI, 2*Math.PI)
        //     ctx.lineTo(points[4][0]-options.border[0], points[4][1])
        //     ctx.arc(points[5][0], points[4][1], options.radius[2]-options.border[0], 0, .5*Math.PI)
        //     ctx.lineTo(points[6][0], points[6][1]-options.border[0])
        //     ctx.arc(points[6][0], points[7][1], options.radius[3]-options.border[0], .5*Math.PI, Math.PI)
        //     ctx.closePath()
        //     ctx.fill()
        // }
        ctx.restore()
        // //子级继承
        // ctx.save()
        // ctx.translate(this.center[0], this.center[1])
        // //opacity
        // ctx.globalAlpha = options.opacity
        // //rotate
        // ctx.rotate(options.rotate)
        // //scale
        // ctx.scale(options.scale[0], options.scale[1])

        // //overflow
        // if (options.overflow === 'hidden') {
        //     ctx.globalCompositeOperation = 'source-atop'
        // }
        // // console.log(this.name, options.scale)
        // //文字
        // if (this.text) {
        //     this.textNode.render(ctx, options)
        // }
        //children
        // for (let i = 0, len = this.children.length, child = null; i < len; i++) {
        //     child = this.children[i]
        //     if (child.render) child.render(ctx)
        // }
        ctx.restore()
    }
}